<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4356479" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe86d;</span>
                <div class="name"> 收藏2</div>
                <div class="code-name">&amp;#xe86d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe86f;</span>
                <div class="name">喜欢2</div>
                <div class="code-name">&amp;#xe86f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe870;</span>
                <div class="name">赞2</div>
                <div class="code-name">&amp;#xe870;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe871;</span>
                <div class="name">画幅1:1</div>
                <div class="code-name">&amp;#xe871;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe872;</span>
                <div class="name">画幅16:9</div>
                <div class="code-name">&amp;#xe872;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe873;</span>
                <div class="name">闪光灯打开</div>
                <div class="code-name">&amp;#xe873;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe874;</span>
                <div class="name">闪光灯自动</div>
                <div class="code-name">&amp;#xe874;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe879;</span>
                <div class="name">旋转手机</div>
                <div class="code-name">&amp;#xe879;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe87c;</span>
                <div class="name">播放2</div>
                <div class="code-name">&amp;#xe87c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe87e;</span>
                <div class="name"> 定位小</div>
                <div class="code-name">&amp;#xe87e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe888;</span>
                <div class="name"> 酒店2</div>
                <div class="code-name">&amp;#xe888;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe889;</span>
                <div class="name"> 问答2</div>
                <div class="code-name">&amp;#xe889;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe88b;</span>
                <div class="name">感谢2</div>
                <div class="code-name">&amp;#xe88b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe88c;</span>
                <div class="name">购物2</div>
                <div class="code-name">&amp;#xe88c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe88d;</span>
                <div class="name">活动 想去2</div>
                <div class="code-name">&amp;#xe88d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe88f;</span>
                <div class="name">景点2</div>
                <div class="code-name">&amp;#xe88f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8a7;</span>
                <div class="name">经典玩法2</div>
                <div class="code-name">&amp;#xe8a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ac;</span>
                <div class="name">游记2</div>
                <div class="code-name">&amp;#xe8ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8b9;</span>
                <div class="name">进入箭头小</div>
                <div class="code-name">&amp;#xe8b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8bb;</span>
                <div class="name">关闭小</div>
                <div class="code-name">&amp;#xe8bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8bc;</span>
                <div class="name"> 收藏1小</div>
                <div class="code-name">&amp;#xe8bc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8bd;</span>
                <div class="name">高小</div>
                <div class="code-name">&amp;#xe8bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8be;</span>
                <div class="name"> 历史小</div>
                <div class="code-name">&amp;#xe8be;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8bf;</span>
                <div class="name">对勾小</div>
                <div class="code-name">&amp;#xe8bf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c0;</span>
                <div class="name">低小</div>
                <div class="code-name">&amp;#xe8c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c1;</span>
                <div class="name">问小</div>
                <div class="code-name">&amp;#xe8c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c2;</span>
                <div class="name">表单控件 删除</div>
                <div class="code-name">&amp;#xe8c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8c6;</span>
                <div class="name">赞填充小</div>
                <div class="code-name">&amp;#xe8c6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ca;</span>
                <div class="name">答小</div>
                <div class="code-name">&amp;#xe8ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8d9;</span>
                <div class="name">须知小</div>
                <div class="code-name">&amp;#xe8d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8dc;</span>
                <div class="name">关闭实心</div>
                <div class="code-name">&amp;#xe8dc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8e6;</span>
                <div class="name">我说好1</div>
                <div class="code-name">&amp;#xe8e6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8fd;</span>
                <div class="name">礼包</div>
                <div class="code-name">&amp;#xe8fd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe902;</span>
                <div class="name">特价机票</div>
                <div class="code-name">&amp;#xe902;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe905;</span>
                <div class="name">语音2</div>
                <div class="code-name">&amp;#xe905;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe909;</span>
                <div class="name">正确实心</div>
                <div class="code-name">&amp;#xe909;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe931;</span>
                <div class="name">目的地2</div>
                <div class="code-name">&amp;#xe931;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe937;</span>
                <div class="name">座位</div>
                <div class="code-name">&amp;#xe937;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe941;</span>
                <div class="name">火车站2小</div>
                <div class="code-name">&amp;#xe941;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe942;</span>
                <div class="name">景点小</div>
                <div class="code-name">&amp;#xe942;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe943;</span>
                <div class="name">我的小</div>
                <div class="code-name">&amp;#xe943;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe944;</span>
                <div class="name">地铁2小</div>
                <div class="code-name">&amp;#xe944;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe945;</span>
                <div class="name">机场小</div>
                <div class="code-name">&amp;#xe945;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe949;</span>
                <div class="name">评分小</div>
                <div class="code-name">&amp;#xe949;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
                <div class="name">维修</div>
                <div class="code-name">&amp;#xe602;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">全部</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">新车报价</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">我的砍价</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">爱车估价</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">专家答疑</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">做保养</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">油卡充值</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">购买</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">买车险</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">换轮胎</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">保养手册</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">爱车</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">罚款代缴</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">新车必备</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">查违章</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">设置</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">自助洗车</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">金融买车</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">驾照查分</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">年检代办</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe618;</span>
                <div class="name">用户反馈</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe619;</span>
                <div class="name">权益中心</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61a;</span>
                <div class="name">门店</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61b;</span>
                <div class="name">直播买车</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
                <div class="name">我的</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe663;</span>
                <div class="name">发现好车</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">举报</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">安全保障</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">消息-置灰</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">喜欢</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">更多</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">首页-置灰</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">个人中心-置灰</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">看点-置灰</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe625;</span>
                <div class="name">返回</div>
                <div class="code-name">&amp;#xe625;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
                <div class="name">快捷支付</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
                <div class="name">支付订金</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">开通服务</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">签署协议</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">店铺</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62b;</span>
                <div class="name">关注-置灰</div>
                <div class="code-name">&amp;#xe62b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">提交验资</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62d;</span>
                <div class="name">定位 2</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62e;</span>
                <div class="name">转入资金</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">验资完成</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe630;</span>
                <div class="name">关闭</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe631;</span>
                <div class="name">分享</div>
                <div class="code-name">&amp;#xe631;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe632;</span>
                <div class="name">在线验资</div>
                <div class="code-name">&amp;#xe632;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe633;</span>
                <div class="name">上传图片</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe634;</span>
                <div class="name">定位</div>
                <div class="code-name">&amp;#xe634;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe635;</span>
                <div class="name">在线选房</div>
                <div class="code-name">&amp;#xe635;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe636;</span>
                <div class="name">填选购人</div>
                <div class="code-name">&amp;#xe636;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe637;</span>
                <div class="name">分享 2</div>
                <div class="code-name">&amp;#xe637;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe638;</span>
                <div class="name">保护号码</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe639;</span>
                <div class="name">下拉</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63a;</span>
                <div class="name">专属顾问</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
                <div class="name">编辑</div>
                <div class="code-name">&amp;#xe63b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">进入</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63d;</span>
                <div class="name">下拉</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63e;</span>
                <div class="name">提示</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63f;</span>
                <div class="name">床</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe640;</span>
                <div class="name">停车场</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe641;</span>
                <div class="name">休息室</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">衣柜</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe643;</span>
                <div class="name">休闲区</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe644;</span>
                <div class="name">书桌</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe645;</span>
                <div class="name">智能门锁</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe646;</span>
                <div class="name">宽带</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe647;</span>
                <div class="name">前台</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe648;</span>
                <div class="name">书吧</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe649;</span>
                <div class="name">洗衣房</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64a;</span>
                <div class="name">空中花园</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64b;</span>
                <div class="name">电视机</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64c;</span>
                <div class="name">微波炉</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64d;</span>
                <div class="name">电梯</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64e;</span>
                <div class="name">天然气</div>
                <div class="code-name">&amp;#xe64e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64f;</span>
                <div class="name">电磁炉</div>
                <div class="code-name">&amp;#xe64f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe650;</span>
                <div class="name">热水器</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe651;</span>
                <div class="name">安全监控</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe652;</span>
                <div class="name">DIY餐吧</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe653;</span>
                <div class="name">橱柜</div>
                <div class="code-name">&amp;#xe653;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe654;</span>
                <div class="name">地铁</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe655;</span>
                <div class="name">影音区</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe656;</span>
                <div class="name">餐桌</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe657;</span>
                <div class="name">抽油烟机</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe658;</span>
                <div class="name">空调</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe659;</span>
                <div class="name">桌球区</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65a;</span>
                <div class="name">暖气</div>
                <div class="code-name">&amp;#xe65a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65b;</span>
                <div class="name">沙发</div>
                <div class="code-name">&amp;#xe65b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65c;</span>
                <div class="name">健身房</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65d;</span>
                <div class="name">便利店</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65e;</span>
                <div class="name">会客区</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65f;</span>
                <div class="name">24H安保</div>
                <div class="code-name">&amp;#xe65f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe660;</span>
                <div class="name">社区活动</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe661;</span>
                <div class="name">冰箱</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe662;</span>
                <div class="name">洗衣机</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1701587365025') format('woff2'),
       url('iconfont.woff?t=1701587365025') format('woff'),
       url('iconfont.ttf?t=1701587365025') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-shoucang"></span>
            <div class="name">
               收藏2
            </div>
            <div class="code-name">.icon-shoucang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xihuan1"></span>
            <div class="name">
              喜欢2
            </div>
            <div class="code-name">.icon-xihuan1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zan"></span>
            <div class="name">
              赞2
            </div>
            <div class="code-name">.icon-zan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huafu"></span>
            <div class="name">
              画幅1:1
            </div>
            <div class="code-name">.icon-huafu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huafu1"></span>
            <div class="name">
              画幅16:9
            </div>
            <div class="code-name">.icon-huafu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanguangdengdakai"></span>
            <div class="name">
              闪光灯打开
            </div>
            <div class="code-name">.icon-shanguangdengdakai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanguangdengzidong"></span>
            <div class="name">
              闪光灯自动
            </div>
            <div class="code-name">.icon-shanguangdengzidong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xuanzhuanshouji"></span>
            <div class="name">
              旋转手机
            </div>
            <div class="code-name">.icon-xuanzhuanshouji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bofang"></span>
            <div class="name">
              播放2
            </div>
            <div class="code-name">.icon-bofang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dingweixiao"></span>
            <div class="name">
               定位小
            </div>
            <div class="code-name">.icon-dingweixiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiudian"></span>
            <div class="name">
               酒店2
            </div>
            <div class="code-name">.icon-jiudian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenda"></span>
            <div class="name">
               问答2
            </div>
            <div class="code-name">.icon-wenda
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ganxie"></span>
            <div class="name">
              感谢2
            </div>
            <div class="code-name">.icon-ganxie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gouwu"></span>
            <div class="name">
              购物2
            </div>
            <div class="code-name">.icon-gouwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huodongxiangqu"></span>
            <div class="name">
              活动 想去2
            </div>
            <div class="code-name">.icon-huodongxiangqu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jingdian"></span>
            <div class="name">
              景点2
            </div>
            <div class="code-name">.icon-jingdian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jingdianwanfa"></span>
            <div class="name">
              经典玩法2
            </div>
            <div class="code-name">.icon-jingdianwanfa
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-youji"></span>
            <div class="name">
              游记2
            </div>
            <div class="code-name">.icon-youji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jinrujiantouxiao"></span>
            <div class="name">
              进入箭头小
            </div>
            <div class="code-name">.icon-jinrujiantouxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guanbixiao"></span>
            <div class="name">
              关闭小
            </div>
            <div class="code-name">.icon-guanbixiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shoucangxiao"></span>
            <div class="name">
               收藏1小
            </div>
            <div class="code-name">.icon-shoucangxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gaoxiao"></span>
            <div class="name">
              高小
            </div>
            <div class="code-name">.icon-gaoxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lishixiao"></span>
            <div class="name">
               历史小
            </div>
            <div class="code-name">.icon-lishixiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-duigouxiao"></span>
            <div class="name">
              对勾小
            </div>
            <div class="code-name">.icon-duigouxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dixiao"></span>
            <div class="name">
              低小
            </div>
            <div class="code-name">.icon-dixiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wenxiao"></span>
            <div class="name">
              问小
            </div>
            <div class="code-name">.icon-wenxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaodankongjianshanchu"></span>
            <div class="name">
              表单控件 删除
            </div>
            <div class="code-name">.icon-biaodankongjianshanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zantianchongxiao"></span>
            <div class="name">
              赞填充小
            </div>
            <div class="code-name">.icon-zantianchongxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daxiao"></span>
            <div class="name">
              答小
            </div>
            <div class="code-name">.icon-daxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xuzhixiao"></span>
            <div class="name">
              须知小
            </div>
            <div class="code-name">.icon-xuzhixiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guanbishixin"></span>
            <div class="name">
              关闭实心
            </div>
            <div class="code-name">.icon-guanbishixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-woshuohao"></span>
            <div class="name">
              我说好1
            </div>
            <div class="code-name">.icon-woshuohao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-libao"></span>
            <div class="name">
              礼包
            </div>
            <div class="code-name">.icon-libao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tejiajipiao"></span>
            <div class="name">
              特价机票
            </div>
            <div class="code-name">.icon-tejiajipiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yuyin"></span>
            <div class="name">
              语音2
            </div>
            <div class="code-name">.icon-yuyin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhengqueshixin"></span>
            <div class="name">
              正确实心
            </div>
            <div class="code-name">.icon-zhengqueshixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mudedi"></span>
            <div class="name">
              目的地2
            </div>
            <div class="code-name">.icon-mudedi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zuowei"></span>
            <div class="name">
              座位
            </div>
            <div class="code-name">.icon-zuowei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huochezhanxiao"></span>
            <div class="name">
              火车站2小
            </div>
            <div class="code-name">.icon-huochezhanxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jingdianxiao"></span>
            <div class="name">
              景点小
            </div>
            <div class="code-name">.icon-jingdianxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wodexiao"></span>
            <div class="name">
              我的小
            </div>
            <div class="code-name">.icon-wodexiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ditiexiao"></span>
            <div class="name">
              地铁2小
            </div>
            <div class="code-name">.icon-ditiexiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jichangxiao"></span>
            <div class="name">
              机场小
            </div>
            <div class="code-name">.icon-jichangxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pingfenxiao"></span>
            <div class="name">
              评分小
            </div>
            <div class="code-name">.icon-pingfenxiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weixiu"></span>
            <div class="name">
              维修
            </div>
            <div class="code-name">.icon-weixiu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-aichegujiabeifen7"></span>
            <div class="name">
              全部
            </div>
            <div class="code-name">.icon-aichegujiabeifen7
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xinchebaojia"></span>
            <div class="name">
              新车报价
            </div>
            <div class="code-name">.icon-xinchebaojia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wodekanjia"></span>
            <div class="name">
              我的砍价
            </div>
            <div class="code-name">.icon-wodekanjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-aichegujiabeifen"></span>
            <div class="name">
              爱车估价
            </div>
            <div class="code-name">.icon-aichegujiabeifen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuanjiadayibeifen"></span>
            <div class="name">
              专家答疑
            </div>
            <div class="code-name">.icon-zhuanjiadayibeifen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zuobaoyang"></span>
            <div class="name">
              做保养
            </div>
            <div class="code-name">.icon-zuobaoyang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-youkachongzhi"></span>
            <div class="name">
              油卡充值
            </div>
            <div class="code-name">.icon-youkachongzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-maichepin"></span>
            <div class="name">
              购买
            </div>
            <div class="code-name">.icon-maichepin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-maichexianbeifen"></span>
            <div class="name">
              买车险
            </div>
            <div class="code-name">.icon-maichexianbeifen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huanluntai"></span>
            <div class="name">
              换轮胎
            </div>
            <div class="code-name">.icon-huanluntai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baoyangshoucebeifen"></span>
            <div class="name">
              保养手册
            </div>
            <div class="code-name">.icon-baoyangshoucebeifen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-aichegujiabeifen12"></span>
            <div class="name">
              爱车
            </div>
            <div class="code-name">.icon-aichegujiabeifen12
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fakuandaijiaobeifen"></span>
            <div class="name">
              罚款代缴
            </div>
            <div class="code-name">.icon-fakuandaijiaobeifen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xinchebibei"></span>
            <div class="name">
              新车必备
            </div>
            <div class="code-name">.icon-xinchebibei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chaweizhang"></span>
            <div class="name">
              查违章
            </div>
            <div class="code-name">.icon-chaweizhang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-aichegujiabeifen5"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon-aichegujiabeifen5
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuanchezhuanyongbeifen"></span>
            <div class="name">
              设置
            </div>
            <div class="code-name">.icon-zhuanchezhuanyongbeifen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zizhuxiche"></span>
            <div class="name">
              自助洗车
            </div>
            <div class="code-name">.icon-zizhuxiche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jinrongmaichebeifen"></span>
            <div class="name">
              金融买车
            </div>
            <div class="code-name">.icon-jinrongmaichebeifen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiazhaochafenbeifen"></span>
            <div class="name">
              驾照查分
            </div>
            <div class="code-name">.icon-jiazhaochafenbeifen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-nianjiandaibanbeifen"></span>
            <div class="name">
              年检代办
            </div>
            <div class="code-name">.icon-nianjiandaibanbeifen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yonghufankuibeifen"></span>
            <div class="name">
              用户反馈
            </div>
            <div class="code-name">.icon-yonghufankuibeifen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quanyizhongxinbeifen"></span>
            <div class="name">
              权益中心
            </div>
            <div class="code-name">.icon-quanyizhongxinbeifen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mendian"></span>
            <div class="name">
              门店
            </div>
            <div class="code-name">.icon-mendian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhibomaiche"></span>
            <div class="name">
              直播买车
            </div>
            <div class="code-name">.icon-zhibomaiche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-aichegujiabeifen6"></span>
            <div class="name">
              我的
            </div>
            <div class="code-name">.icon-aichegujiabeifen6
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-remaihaoche"></span>
            <div class="name">
              发现好车
            </div>
            <div class="code-name">.icon-remaihaoche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jubao"></span>
            <div class="name">
              举报
            </div>
            <div class="code-name">.icon-jubao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-anquanbaozhang"></span>
            <div class="name">
              安全保障
            </div>
            <div class="code-name">.icon-anquanbaozhang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaoxi-zhihui"></span>
            <div class="name">
              消息-置灰
            </div>
            <div class="code-name">.icon-xiaoxi-zhihui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xihuan"></span>
            <div class="name">
              喜欢
            </div>
            <div class="code-name">.icon-xihuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gengduo"></span>
            <div class="name">
              更多
            </div>
            <div class="code-name">.icon-gengduo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouye-zhihui"></span>
            <div class="name">
              首页-置灰
            </div>
            <div class="code-name">.icon-shouye-zhihui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gerenzhongxin-zhihui"></span>
            <div class="name">
              个人中心-置灰
            </div>
            <div class="code-name">.icon-gerenzhongxin-zhihui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kandian-zhihui"></span>
            <div class="name">
              看点-置灰
            </div>
            <div class="code-name">.icon-kandian-zhihui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fanhui"></span>
            <div class="name">
              返回
            </div>
            <div class="code-name">.icon-fanhui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kuaijiezhifu"></span>
            <div class="name">
              快捷支付
            </div>
            <div class="code-name">.icon-kuaijiezhifu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhifudingjin"></span>
            <div class="name">
              支付订金
            </div>
            <div class="code-name">.icon-zhifudingjin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kaitongfuwu"></span>
            <div class="name">
              开通服务
            </div>
            <div class="code-name">.icon-kaitongfuwu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qianshuxieyi"></span>
            <div class="name">
              签署协议
            </div>
            <div class="code-name">.icon-qianshuxieyi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianpu"></span>
            <div class="name">
              店铺
            </div>
            <div class="code-name">.icon-dianpu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guanzhu-zhihui"></span>
            <div class="name">
              关注-置灰
            </div>
            <div class="code-name">.icon-guanzhu-zhihui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tijiaoyanzi"></span>
            <div class="name">
              提交验资
            </div>
            <div class="code-name">.icon-tijiaoyanzi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-dingwei2"></span>
            <div class="name">
              定位 2
            </div>
            <div class="code-name">.icon-a-dingwei2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuanruzijin"></span>
            <div class="name">
              转入资金
            </div>
            <div class="code-name">.icon-zhuanruzijin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yanziwancheng"></span>
            <div class="name">
              验资完成
            </div>
            <div class="code-name">.icon-yanziwancheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guanbi"></span>
            <div class="name">
              关闭
            </div>
            <div class="code-name">.icon-guanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fenxiang"></span>
            <div class="name">
              分享
            </div>
            <div class="code-name">.icon-fenxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zaixianyanzi"></span>
            <div class="name">
              在线验资
            </div>
            <div class="code-name">.icon-zaixianyanzi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangchuantupian"></span>
            <div class="name">
              上传图片
            </div>
            <div class="code-name">.icon-shangchuantupian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dingwei"></span>
            <div class="name">
              定位
            </div>
            <div class="code-name">.icon-dingwei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zaixianxuanfang"></span>
            <div class="name">
              在线选房
            </div>
            <div class="code-name">.icon-zaixianxuanfang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tianxuangouren"></span>
            <div class="name">
              填选购人
            </div>
            <div class="code-name">.icon-tianxuangouren
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-fenxiang2"></span>
            <div class="name">
              分享 2
            </div>
            <div class="code-name">.icon-a-fenxiang2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baohuhaoma"></span>
            <div class="name">
              保护号码
            </div>
            <div class="code-name">.icon-baohuhaoma
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-xiala2"></span>
            <div class="name">
              下拉
            </div>
            <div class="code-name">.icon-a-xiala2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuanshuguwen"></span>
            <div class="name">
              专属顾问
            </div>
            <div class="code-name">.icon-zhuanshuguwen
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianji"></span>
            <div class="name">
              编辑
            </div>
            <div class="code-name">.icon-bianji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jinru"></span>
            <div class="name">
              进入
            </div>
            <div class="code-name">.icon-jinru
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiala"></span>
            <div class="name">
              下拉
            </div>
            <div class="code-name">.icon-xiala
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tishi"></span>
            <div class="name">
              提示
            </div>
            <div class="code-name">.icon-tishi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chuang"></span>
            <div class="name">
              床
            </div>
            <div class="code-name">.icon-chuang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tingchechang"></span>
            <div class="name">
              停车场
            </div>
            <div class="code-name">.icon-tingchechang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiuxishi"></span>
            <div class="name">
              休息室
            </div>
            <div class="code-name">.icon-xiuxishi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yigui"></span>
            <div class="name">
              衣柜
            </div>
            <div class="code-name">.icon-yigui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiuxianqu"></span>
            <div class="name">
              休闲区
            </div>
            <div class="code-name">.icon-xiuxianqu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuzhuo"></span>
            <div class="name">
              书桌
            </div>
            <div class="code-name">.icon-shuzhuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhinengmensuo"></span>
            <div class="name">
              智能门锁
            </div>
            <div class="code-name">.icon-zhinengmensuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kuandai"></span>
            <div class="name">
              宽带
            </div>
            <div class="code-name">.icon-kuandai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qiantai"></span>
            <div class="name">
              前台
            </div>
            <div class="code-name">.icon-qiantai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shuba"></span>
            <div class="name">
              书吧
            </div>
            <div class="code-name">.icon-shuba
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiyifang"></span>
            <div class="name">
              洗衣房
            </div>
            <div class="code-name">.icon-xiyifang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kongzhonghuayuan"></span>
            <div class="name">
              空中花园
            </div>
            <div class="code-name">.icon-kongzhonghuayuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianshiji"></span>
            <div class="name">
              电视机
            </div>
            <div class="code-name">.icon-dianshiji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weibolu"></span>
            <div class="name">
              微波炉
            </div>
            <div class="code-name">.icon-weibolu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianti"></span>
            <div class="name">
              电梯
            </div>
            <div class="code-name">.icon-dianti
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tianranqi"></span>
            <div class="name">
              天然气
            </div>
            <div class="code-name">.icon-tianranqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-diancilu"></span>
            <div class="name">
              电磁炉
            </div>
            <div class="code-name">.icon-diancilu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-reshuiqi"></span>
            <div class="name">
              热水器
            </div>
            <div class="code-name">.icon-reshuiqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-anquanjiankong"></span>
            <div class="name">
              安全监控
            </div>
            <div class="code-name">.icon-anquanjiankong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-DIYcanba"></span>
            <div class="name">
              DIY餐吧
            </div>
            <div class="code-name">.icon-DIYcanba
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chugui"></span>
            <div class="name">
              橱柜
            </div>
            <div class="code-name">.icon-chugui
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ditie"></span>
            <div class="name">
              地铁
            </div>
            <div class="code-name">.icon-ditie
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yingyinqu"></span>
            <div class="name">
              影音区
            </div>
            <div class="code-name">.icon-yingyinqu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-canzhuo"></span>
            <div class="name">
              餐桌
            </div>
            <div class="code-name">.icon-canzhuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chouyouyanji"></span>
            <div class="name">
              抽油烟机
            </div>
            <div class="code-name">.icon-chouyouyanji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kongtiao"></span>
            <div class="name">
              空调
            </div>
            <div class="code-name">.icon-kongtiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhuoqiuqu"></span>
            <div class="name">
              桌球区
            </div>
            <div class="code-name">.icon-zhuoqiuqu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-nuanqi"></span>
            <div class="name">
              暖气
            </div>
            <div class="code-name">.icon-nuanqi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shafa"></span>
            <div class="name">
              沙发
            </div>
            <div class="code-name">.icon-shafa
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jianshenfang"></span>
            <div class="name">
              健身房
            </div>
            <div class="code-name">.icon-jianshenfang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bianlidian"></span>
            <div class="name">
              便利店
            </div>
            <div class="code-name">.icon-bianlidian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huikequ"></span>
            <div class="name">
              会客区
            </div>
            <div class="code-name">.icon-huikequ
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-a-24Hanbao"></span>
            <div class="name">
              24H安保
            </div>
            <div class="code-name">.icon-a-24Hanbao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shequhuodong"></span>
            <div class="name">
              社区活动
            </div>
            <div class="code-name">.icon-shequhuodong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bingxiang"></span>
            <div class="name">
              冰箱
            </div>
            <div class="code-name">.icon-bingxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiyiji"></span>
            <div class="name">
              洗衣机
            </div>
            <div class="code-name">.icon-xiyiji
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoucang"></use>
                </svg>
                <div class="name"> 收藏2</div>
                <div class="code-name">#icon-shoucang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xihuan1"></use>
                </svg>
                <div class="name">喜欢2</div>
                <div class="code-name">#icon-xihuan1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zan"></use>
                </svg>
                <div class="name">赞2</div>
                <div class="code-name">#icon-zan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huafu"></use>
                </svg>
                <div class="name">画幅1:1</div>
                <div class="code-name">#icon-huafu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huafu1"></use>
                </svg>
                <div class="name">画幅16:9</div>
                <div class="code-name">#icon-huafu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanguangdengdakai"></use>
                </svg>
                <div class="name">闪光灯打开</div>
                <div class="code-name">#icon-shanguangdengdakai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanguangdengzidong"></use>
                </svg>
                <div class="name">闪光灯自动</div>
                <div class="code-name">#icon-shanguangdengzidong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xuanzhuanshouji"></use>
                </svg>
                <div class="name">旋转手机</div>
                <div class="code-name">#icon-xuanzhuanshouji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bofang"></use>
                </svg>
                <div class="name">播放2</div>
                <div class="code-name">#icon-bofang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dingweixiao"></use>
                </svg>
                <div class="name"> 定位小</div>
                <div class="code-name">#icon-dingweixiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiudian"></use>
                </svg>
                <div class="name"> 酒店2</div>
                <div class="code-name">#icon-jiudian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenda"></use>
                </svg>
                <div class="name"> 问答2</div>
                <div class="code-name">#icon-wenda</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ganxie"></use>
                </svg>
                <div class="name">感谢2</div>
                <div class="code-name">#icon-ganxie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gouwu"></use>
                </svg>
                <div class="name">购物2</div>
                <div class="code-name">#icon-gouwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huodongxiangqu"></use>
                </svg>
                <div class="name">活动 想去2</div>
                <div class="code-name">#icon-huodongxiangqu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jingdian"></use>
                </svg>
                <div class="name">景点2</div>
                <div class="code-name">#icon-jingdian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jingdianwanfa"></use>
                </svg>
                <div class="name">经典玩法2</div>
                <div class="code-name">#icon-jingdianwanfa</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-youji"></use>
                </svg>
                <div class="name">游记2</div>
                <div class="code-name">#icon-youji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jinrujiantouxiao"></use>
                </svg>
                <div class="name">进入箭头小</div>
                <div class="code-name">#icon-jinrujiantouxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanbixiao"></use>
                </svg>
                <div class="name">关闭小</div>
                <div class="code-name">#icon-guanbixiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoucangxiao"></use>
                </svg>
                <div class="name"> 收藏1小</div>
                <div class="code-name">#icon-shoucangxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gaoxiao"></use>
                </svg>
                <div class="name">高小</div>
                <div class="code-name">#icon-gaoxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lishixiao"></use>
                </svg>
                <div class="name"> 历史小</div>
                <div class="code-name">#icon-lishixiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duigouxiao"></use>
                </svg>
                <div class="name">对勾小</div>
                <div class="code-name">#icon-duigouxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dixiao"></use>
                </svg>
                <div class="name">低小</div>
                <div class="code-name">#icon-dixiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenxiao"></use>
                </svg>
                <div class="name">问小</div>
                <div class="code-name">#icon-wenxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaodankongjianshanchu"></use>
                </svg>
                <div class="name">表单控件 删除</div>
                <div class="code-name">#icon-biaodankongjianshanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zantianchongxiao"></use>
                </svg>
                <div class="name">赞填充小</div>
                <div class="code-name">#icon-zantianchongxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daxiao"></use>
                </svg>
                <div class="name">答小</div>
                <div class="code-name">#icon-daxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xuzhixiao"></use>
                </svg>
                <div class="name">须知小</div>
                <div class="code-name">#icon-xuzhixiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanbishixin"></use>
                </svg>
                <div class="name">关闭实心</div>
                <div class="code-name">#icon-guanbishixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-woshuohao"></use>
                </svg>
                <div class="name">我说好1</div>
                <div class="code-name">#icon-woshuohao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-libao"></use>
                </svg>
                <div class="name">礼包</div>
                <div class="code-name">#icon-libao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tejiajipiao"></use>
                </svg>
                <div class="name">特价机票</div>
                <div class="code-name">#icon-tejiajipiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yuyin"></use>
                </svg>
                <div class="name">语音2</div>
                <div class="code-name">#icon-yuyin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhengqueshixin"></use>
                </svg>
                <div class="name">正确实心</div>
                <div class="code-name">#icon-zhengqueshixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mudedi"></use>
                </svg>
                <div class="name">目的地2</div>
                <div class="code-name">#icon-mudedi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zuowei"></use>
                </svg>
                <div class="name">座位</div>
                <div class="code-name">#icon-zuowei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huochezhanxiao"></use>
                </svg>
                <div class="name">火车站2小</div>
                <div class="code-name">#icon-huochezhanxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jingdianxiao"></use>
                </svg>
                <div class="name">景点小</div>
                <div class="code-name">#icon-jingdianxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wodexiao"></use>
                </svg>
                <div class="name">我的小</div>
                <div class="code-name">#icon-wodexiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ditiexiao"></use>
                </svg>
                <div class="name">地铁2小</div>
                <div class="code-name">#icon-ditiexiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jichangxiao"></use>
                </svg>
                <div class="name">机场小</div>
                <div class="code-name">#icon-jichangxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pingfenxiao"></use>
                </svg>
                <div class="name">评分小</div>
                <div class="code-name">#icon-pingfenxiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weixiu"></use>
                </svg>
                <div class="name">维修</div>
                <div class="code-name">#icon-weixiu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-aichegujiabeifen7"></use>
                </svg>
                <div class="name">全部</div>
                <div class="code-name">#icon-aichegujiabeifen7</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xinchebaojia"></use>
                </svg>
                <div class="name">新车报价</div>
                <div class="code-name">#icon-xinchebaojia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wodekanjia"></use>
                </svg>
                <div class="name">我的砍价</div>
                <div class="code-name">#icon-wodekanjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-aichegujiabeifen"></use>
                </svg>
                <div class="name">爱车估价</div>
                <div class="code-name">#icon-aichegujiabeifen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuanjiadayibeifen"></use>
                </svg>
                <div class="name">专家答疑</div>
                <div class="code-name">#icon-zhuanjiadayibeifen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zuobaoyang"></use>
                </svg>
                <div class="name">做保养</div>
                <div class="code-name">#icon-zuobaoyang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-youkachongzhi"></use>
                </svg>
                <div class="name">油卡充值</div>
                <div class="code-name">#icon-youkachongzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-maichepin"></use>
                </svg>
                <div class="name">购买</div>
                <div class="code-name">#icon-maichepin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-maichexianbeifen"></use>
                </svg>
                <div class="name">买车险</div>
                <div class="code-name">#icon-maichexianbeifen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huanluntai"></use>
                </svg>
                <div class="name">换轮胎</div>
                <div class="code-name">#icon-huanluntai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baoyangshoucebeifen"></use>
                </svg>
                <div class="name">保养手册</div>
                <div class="code-name">#icon-baoyangshoucebeifen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-aichegujiabeifen12"></use>
                </svg>
                <div class="name">爱车</div>
                <div class="code-name">#icon-aichegujiabeifen12</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fakuandaijiaobeifen"></use>
                </svg>
                <div class="name">罚款代缴</div>
                <div class="code-name">#icon-fakuandaijiaobeifen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xinchebibei"></use>
                </svg>
                <div class="name">新车必备</div>
                <div class="code-name">#icon-xinchebibei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chaweizhang"></use>
                </svg>
                <div class="name">查违章</div>
                <div class="code-name">#icon-chaweizhang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-aichegujiabeifen5"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon-aichegujiabeifen5</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuanchezhuanyongbeifen"></use>
                </svg>
                <div class="name">设置</div>
                <div class="code-name">#icon-zhuanchezhuanyongbeifen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zizhuxiche"></use>
                </svg>
                <div class="name">自助洗车</div>
                <div class="code-name">#icon-zizhuxiche</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jinrongmaichebeifen"></use>
                </svg>
                <div class="name">金融买车</div>
                <div class="code-name">#icon-jinrongmaichebeifen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiazhaochafenbeifen"></use>
                </svg>
                <div class="name">驾照查分</div>
                <div class="code-name">#icon-jiazhaochafenbeifen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-nianjiandaibanbeifen"></use>
                </svg>
                <div class="name">年检代办</div>
                <div class="code-name">#icon-nianjiandaibanbeifen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yonghufankuibeifen"></use>
                </svg>
                <div class="name">用户反馈</div>
                <div class="code-name">#icon-yonghufankuibeifen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quanyizhongxinbeifen"></use>
                </svg>
                <div class="name">权益中心</div>
                <div class="code-name">#icon-quanyizhongxinbeifen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mendian"></use>
                </svg>
                <div class="name">门店</div>
                <div class="code-name">#icon-mendian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhibomaiche"></use>
                </svg>
                <div class="name">直播买车</div>
                <div class="code-name">#icon-zhibomaiche</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-aichegujiabeifen6"></use>
                </svg>
                <div class="name">我的</div>
                <div class="code-name">#icon-aichegujiabeifen6</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-remaihaoche"></use>
                </svg>
                <div class="name">发现好车</div>
                <div class="code-name">#icon-remaihaoche</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jubao"></use>
                </svg>
                <div class="name">举报</div>
                <div class="code-name">#icon-jubao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-anquanbaozhang"></use>
                </svg>
                <div class="name">安全保障</div>
                <div class="code-name">#icon-anquanbaozhang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxi-zhihui"></use>
                </svg>
                <div class="name">消息-置灰</div>
                <div class="code-name">#icon-xiaoxi-zhihui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xihuan"></use>
                </svg>
                <div class="name">喜欢</div>
                <div class="code-name">#icon-xihuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gengduo"></use>
                </svg>
                <div class="name">更多</div>
                <div class="code-name">#icon-gengduo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye-zhihui"></use>
                </svg>
                <div class="name">首页-置灰</div>
                <div class="code-name">#icon-shouye-zhihui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gerenzhongxin-zhihui"></use>
                </svg>
                <div class="name">个人中心-置灰</div>
                <div class="code-name">#icon-gerenzhongxin-zhihui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kandian-zhihui"></use>
                </svg>
                <div class="name">看点-置灰</div>
                <div class="code-name">#icon-kandian-zhihui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fanhui"></use>
                </svg>
                <div class="name">返回</div>
                <div class="code-name">#icon-fanhui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kuaijiezhifu"></use>
                </svg>
                <div class="name">快捷支付</div>
                <div class="code-name">#icon-kuaijiezhifu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhifudingjin"></use>
                </svg>
                <div class="name">支付订金</div>
                <div class="code-name">#icon-zhifudingjin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kaitongfuwu"></use>
                </svg>
                <div class="name">开通服务</div>
                <div class="code-name">#icon-kaitongfuwu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qianshuxieyi"></use>
                </svg>
                <div class="name">签署协议</div>
                <div class="code-name">#icon-qianshuxieyi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianpu"></use>
                </svg>
                <div class="name">店铺</div>
                <div class="code-name">#icon-dianpu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanzhu-zhihui"></use>
                </svg>
                <div class="name">关注-置灰</div>
                <div class="code-name">#icon-guanzhu-zhihui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tijiaoyanzi"></use>
                </svg>
                <div class="name">提交验资</div>
                <div class="code-name">#icon-tijiaoyanzi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-dingwei2"></use>
                </svg>
                <div class="name">定位 2</div>
                <div class="code-name">#icon-a-dingwei2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuanruzijin"></use>
                </svg>
                <div class="name">转入资金</div>
                <div class="code-name">#icon-zhuanruzijin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yanziwancheng"></use>
                </svg>
                <div class="name">验资完成</div>
                <div class="code-name">#icon-yanziwancheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanbi"></use>
                </svg>
                <div class="name">关闭</div>
                <div class="code-name">#icon-guanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenxiang"></use>
                </svg>
                <div class="name">分享</div>
                <div class="code-name">#icon-fenxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zaixianyanzi"></use>
                </svg>
                <div class="name">在线验资</div>
                <div class="code-name">#icon-zaixianyanzi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangchuantupian"></use>
                </svg>
                <div class="name">上传图片</div>
                <div class="code-name">#icon-shangchuantupian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dingwei"></use>
                </svg>
                <div class="name">定位</div>
                <div class="code-name">#icon-dingwei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zaixianxuanfang"></use>
                </svg>
                <div class="name">在线选房</div>
                <div class="code-name">#icon-zaixianxuanfang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tianxuangouren"></use>
                </svg>
                <div class="name">填选购人</div>
                <div class="code-name">#icon-tianxuangouren</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-fenxiang2"></use>
                </svg>
                <div class="name">分享 2</div>
                <div class="code-name">#icon-a-fenxiang2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baohuhaoma"></use>
                </svg>
                <div class="name">保护号码</div>
                <div class="code-name">#icon-baohuhaoma</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-xiala2"></use>
                </svg>
                <div class="name">下拉</div>
                <div class="code-name">#icon-a-xiala2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuanshuguwen"></use>
                </svg>
                <div class="name">专属顾问</div>
                <div class="code-name">#icon-zhuanshuguwen</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianji"></use>
                </svg>
                <div class="name">编辑</div>
                <div class="code-name">#icon-bianji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jinru"></use>
                </svg>
                <div class="name">进入</div>
                <div class="code-name">#icon-jinru</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiala"></use>
                </svg>
                <div class="name">下拉</div>
                <div class="code-name">#icon-xiala</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tishi"></use>
                </svg>
                <div class="name">提示</div>
                <div class="code-name">#icon-tishi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chuang"></use>
                </svg>
                <div class="name">床</div>
                <div class="code-name">#icon-chuang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tingchechang"></use>
                </svg>
                <div class="name">停车场</div>
                <div class="code-name">#icon-tingchechang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiuxishi"></use>
                </svg>
                <div class="name">休息室</div>
                <div class="code-name">#icon-xiuxishi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yigui"></use>
                </svg>
                <div class="name">衣柜</div>
                <div class="code-name">#icon-yigui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiuxianqu"></use>
                </svg>
                <div class="name">休闲区</div>
                <div class="code-name">#icon-xiuxianqu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuzhuo"></use>
                </svg>
                <div class="name">书桌</div>
                <div class="code-name">#icon-shuzhuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhinengmensuo"></use>
                </svg>
                <div class="name">智能门锁</div>
                <div class="code-name">#icon-zhinengmensuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kuandai"></use>
                </svg>
                <div class="name">宽带</div>
                <div class="code-name">#icon-kuandai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qiantai"></use>
                </svg>
                <div class="name">前台</div>
                <div class="code-name">#icon-qiantai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuba"></use>
                </svg>
                <div class="name">书吧</div>
                <div class="code-name">#icon-shuba</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiyifang"></use>
                </svg>
                <div class="name">洗衣房</div>
                <div class="code-name">#icon-xiyifang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kongzhonghuayuan"></use>
                </svg>
                <div class="name">空中花园</div>
                <div class="code-name">#icon-kongzhonghuayuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianshiji"></use>
                </svg>
                <div class="name">电视机</div>
                <div class="code-name">#icon-dianshiji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weibolu"></use>
                </svg>
                <div class="name">微波炉</div>
                <div class="code-name">#icon-weibolu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianti"></use>
                </svg>
                <div class="name">电梯</div>
                <div class="code-name">#icon-dianti</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tianranqi"></use>
                </svg>
                <div class="name">天然气</div>
                <div class="code-name">#icon-tianranqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-diancilu"></use>
                </svg>
                <div class="name">电磁炉</div>
                <div class="code-name">#icon-diancilu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-reshuiqi"></use>
                </svg>
                <div class="name">热水器</div>
                <div class="code-name">#icon-reshuiqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-anquanjiankong"></use>
                </svg>
                <div class="name">安全监控</div>
                <div class="code-name">#icon-anquanjiankong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-DIYcanba"></use>
                </svg>
                <div class="name">DIY餐吧</div>
                <div class="code-name">#icon-DIYcanba</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chugui"></use>
                </svg>
                <div class="name">橱柜</div>
                <div class="code-name">#icon-chugui</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ditie"></use>
                </svg>
                <div class="name">地铁</div>
                <div class="code-name">#icon-ditie</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yingyinqu"></use>
                </svg>
                <div class="name">影音区</div>
                <div class="code-name">#icon-yingyinqu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-canzhuo"></use>
                </svg>
                <div class="name">餐桌</div>
                <div class="code-name">#icon-canzhuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chouyouyanji"></use>
                </svg>
                <div class="name">抽油烟机</div>
                <div class="code-name">#icon-chouyouyanji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kongtiao"></use>
                </svg>
                <div class="name">空调</div>
                <div class="code-name">#icon-kongtiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhuoqiuqu"></use>
                </svg>
                <div class="name">桌球区</div>
                <div class="code-name">#icon-zhuoqiuqu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-nuanqi"></use>
                </svg>
                <div class="name">暖气</div>
                <div class="code-name">#icon-nuanqi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shafa"></use>
                </svg>
                <div class="name">沙发</div>
                <div class="code-name">#icon-shafa</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jianshenfang"></use>
                </svg>
                <div class="name">健身房</div>
                <div class="code-name">#icon-jianshenfang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bianlidian"></use>
                </svg>
                <div class="name">便利店</div>
                <div class="code-name">#icon-bianlidian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huikequ"></use>
                </svg>
                <div class="name">会客区</div>
                <div class="code-name">#icon-huikequ</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-24Hanbao"></use>
                </svg>
                <div class="name">24H安保</div>
                <div class="code-name">#icon-a-24Hanbao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shequhuodong"></use>
                </svg>
                <div class="name">社区活动</div>
                <div class="code-name">#icon-shequhuodong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bingxiang"></use>
                </svg>
                <div class="name">冰箱</div>
                <div class="code-name">#icon-bingxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiyiji"></use>
                </svg>
                <div class="name">洗衣机</div>
                <div class="code-name">#icon-xiyiji</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
